<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Page layout</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style/courseDetail.css') }}">
</head>

<body>
<div class="course-detail">
    <div class="course-detail-cons">
        <div class="course-detail-header">
            <div class="ass-left">
                <span class="ass-logo">logo</span>
                <span class="ass-school">{{ school }}</span>
            </div>
            <div class="ass-center">
                <p class="ass-name"></p>
                <div>
                    <p class="ass-hi">Hi, {{ user.name }}</p>
                    <p class="ass-1">welcome to {{ school }}, keep good work</p>
                </div>
            </div>
            <input type="text" class="ass-input" placeholder="search">
        </div>
        <div class="phone-padd">

            <p class="course-detail-title">
                <span class="back" onclick="window.history.back()">
                     <svg viewBox="0 0 32 32" width="100%" height="100%">
                                        <path d="M15.992 25.304c-0 0-0 0-0.001 0-0.516 0-0.981-0.216-1.31-0.563l-0.001-0.001-14.187-14.996c-0.306-0.323-0.494-0.76-0.494-1.241 0-0.998 0.809-1.807 1.807-1.807 0.517 0 0.983 0.217 1.313 0.565l0.001 0.001 12.875 13.612 12.886-13.612c0.331-0.348 0.797-0.565 1.314-0.565 0.481 0 0.918 0.187 1.242 0.493l-0.001-0.001c0.723 0.687 0.755 1.832 0.072 2.555l-14.201 14.996c-0.33 0.348-0.795 0.564-1.311 0.564-0.001 0-0.003 0-0.004 0h0z">
                                        </path>
                                    </svg>
                </span>
                <img src="{{ url_for('static', filename='img/012.svg') }}" alt="">
                Course details
            </p>
            <div class="course-detail-con">
                <p class="course-detail-con-title">
                        <span>
                            {{ course.name }}
                        </span>
                    <span class="course-detail-time">
                            (March 21, 2021—July 1, 2021)
                        </span>
                </p>
                <p class="course-detail-tips">
                    {{ course.about }}
                </p>
                <div class="course-detail-icon">
                    <p>
                        <span class="course-detail-icon-circle"></span>
                        {{ course.lessons }} lesson
                    </p>
                    <p>
                        <span class="course-detail-icon-circle"></span>
                        {{ course.duration }} min
                    </p>
                    <p class="phone-hide">
                        <span class="course-detail-icon-circle"></span>
                        {{ randrange(1, 10) }} assignment
                    </p>
                    <p>
                        <span class="course-detail-icon-circle"></span>
                        {{ course.number_of_students }} student
                    </p>
                </div>
            </div>
            <p class="course-detail-title course-detail-title-aa">
                    <span>
                        <img src="{{ url_for('static', filename='img/012.svg') }}" alt="">
                        Upcoming class
                    </span>
                <span class="view-all phone-hide"> view all</span>
                <span class="view-more phone-show">more</span>
            </p>
        </div>
        <div class="course-detail-lists">
            {% if course.timetables | length == 0 %}
                <div class="empty-data">
                    No courses are scheduled
                </div>
            {% endif %}
            {% for item in course.timetables %}
                    <div class="course-detail-list">
                        <div>
                            <div class="course-detail-left">
                                <p class="course-detail-top">
                                    third
                                </p>
                                <p class="course-detail-week">
                                    week
                                </p>
                            </div>
                            <div class="course-detail-right">
                                <p class="course-detail-right-title">
                                    {{ item.title }}
                                </p>
                                <p class="course-detail-right-tips">
                                    {{ item.about }}
                                </p>
                                {% if user.role.name == 'student' %}
                                    <p class="button-row">
                                        <button class="course-detail-btn">
                                            Enter the course
                                        </button>
                                        {% if item.state == CourseState.signing_in and attendances[item.id] %}
                                            <a class="checked-in course-detail-btn">
                                               Has signed
                                            </a>
                                        {% elif item.state == CourseState.signing_in %}
                                            <a class="checked-in course-detail-btn" onclick="onCheckIn({{ item.id }}, event)">
                                               Signing in
                                            </a>
                                        {% elif item.state == CourseState.started %}
                                            <a class="checked-in course-detail-btn no-start">
                                                Started
                                            </a>
                                        {% elif item.state == CourseState.not_started %}
                                            <a class="checked-in course-detail-btn no-start">
                                                Not started
                                            </a>
                                        {% else %}
                                            <a class="checked-in course-detail-btn no-start">
                                                Finished
                                            </a>
                                        {% endif %}
                                    </p>
                                {% endif %}
                                <div class="course-detail-work-lists">
                                    <div class="course-detail-work-list">
                                        <div>
                                            <p class="course-detail-work-title">
                                                Coursework
                                                <span class="course-detail-work-tip">2</span>
                                            </p>
                                            <div class="course-detail-work-right">
                                                <img src="{{ url_for('static', filename='img/013.svg') }}" alt="">
                                                <div>
                                                    <p class="course-work-title">
                                                        prepare question for unit test
                                                    </p>
                                                    <p class="course-work-tip">
                                                        prepare questions for unit test for the student of class B
                                                    </p>
                                                    <p class="course-work-time">
                                                        06 Dec 2021
                                                    </p>
                                                </div>
                                            </div>
                                        </div>

                                        <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                    </div>
                                    <div class="course-detail-work-list">
                                        <div>
                                            <p class="course-detail-work-title">
                                                Coursework
                                                <span class="course-detail-work-tip">2</span>
                                            </p>
                                            <div class="course-detail-work-right">
                                                <img src="{{ url_for('static', filename='img/013.svg') }}" alt="">
                                                <div>
                                                    <p class="course-work-title">
                                                        prepare question for unit test
                                                    </p>
                                                    <p class="course-work-tip">
                                                        prepare questions for unit test for the student of class B
                                                    </p>
                                                    <p class="course-work-time">
                                                        06 Dec 2021
                                                    </p>
                                                </div>
                                            </div>
                                        </div>
                                        <img src="{{ url_for('static', filename='img/003.svg') }}" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
            {% endfor %}
        </div>
    </div>
</div>
<script src="{{ url_for('static', filename='mobile/js/libs/jquery.min.js') }}" type="text/javascript"
        charset="utf-8"></script>
<script>
    let isSubmitting = false;

    function onCheckIn(classId, event) {
        let el = $(event.target);
        console.log('-event---', el, classId);
        if (isSubmitting) return;
        if (!el.hasClass('no-start')) {
            isSubmitting = true;
            fetch(`/data/lesson/${classId}/signin`, {
                method: 'PUT',
                headers: {
                    'Content-Type': 'application/json;charset=utf-8'
                },
            })
                .then(response => {
                    return response.json();
                })
                .then(result => {
                    isSubmitting = false;
                    if (result.success) {
                        el.addClass('no-start')
                        el.text('Has signed')
                    }
                })
                .catch(err => {
                    isSubmitting = false;
                })
        }
    }
</script>
</body>

</html>